import {useSyncExternalStore} from "react";

export const useStorage = (key: string, initialValue: any) => {
  // 订阅者
  const subscribe = (callback: () => void) => {
    // 订阅浏览器API
    window.addEventListener('storage', callback)

    return () => {
      // 返回取消订阅
      window.removeEventListener('storage', callback)
    }
  }

  // 快照
  const getSnapshot = () => {
    return localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key)!) : initialValue
  }
  const res = useSyncExternalStore(subscribe, getSnapshot)

  // 更新函数
  const updateStorage = (value: any) => {
    localStorage.setItem(key, JSON.stringify(value))
    // 手动触发storage事件，否则页面不会更新。
    window.dispatchEvent(new StorageEvent('storage'))
  }

  return [res, updateStorage]
}


/**
 * 使用:
 * 第一个参数：key。
 * 第二个参数：value。
 */
// const [count, setCount] = useStorage('ks-count', 1)
// setCount(2)
